<template>
    <my-header navText="精彩文章" search="2"></my-header>
	<view class="container">
        <up-sticky bgColor="#fff" offset-top="80">
            <up-tabs :list="list1" @click="click" :activeStyle="{ color: '#2A65FF', fontFamily: 'PingFang SC', transform: 'scale(1.05)',fontWeight: 'normal',lineHeight:'26px'}"
            lineWidth="150"
            lineColor="#2A65FF"
            itemStyle="padding-left: 15px; padding-right: 15px;width:50%; height: 34px;"
            ></up-tabs>
        </up-sticky>
        <scroll-view scroll-y="true" enable-pull-down="false" upper-threshold="5000" refresher-enabled="false" refresher-default-style="none" style="height: calc(100vh - 165px);" @scrolltolower="scrollBottom">
            <my-page-list :newsList="newsList" newsType="3" rank></my-page-list>
        </scroll-view>
        
    </view>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue';
    import { useUserStore } from '@/stores'
    import { getForumdisplayAPI } from '@/api/news'
    import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
    import dayjs from 'dayjs';
    const newsList:any = ref([])
    const page = ref(1)
    const types = ref('')
    const list1 = reactive([  
        { name: '综合' },  
        { name: '最新' },   
    ]);  
   const click = (itemChange:any)=>{
        console.log('item',itemChange)
        if(itemChange.index == 0){
            types.value = ''
        }else{
            types.value = 'lastpost'
        }
        page.value = 1
        newsList.value=[]
        getnewsList(1)
   }
   const scrollBottom = ()=>{
        page.value++
        getnewsList(2)
   }
   const getnewsList = async (type:any) =>{
        const params={
            page:page.value,
            type:types.value
        }
        console.log('pageParams',params)
        const res: any = await getForumdisplayAPI(params)
        // newsList.value = res
        if(!res.length && type == 2){
            uni.showToast({
                title:'已经到底了~',
                icon:'none',
                duration:2000
            })
            return
        }
        if(type == 2 && page.value == 1) {
            uni.showToast({
                title:'已经到底了~',
                icon:'none',
                duration:2000
            })
            return
        }
        res.forEach((element: any) => {
            element.time = dayjs(element.dataline).format('YYYY-MM-DD')
            const srcMatch = element.avatar.match(/<img.*?src=["'](.*?)["']/);
            if (srcMatch && srcMatch[1]) {
            element.avatar = srcMatch[1]
            }
        })
        if(type == 1){
            newsList.value = res
        }else{
            newsList.value.push(...res)
        }
   }
   //下拉刷新
   onPullDownRefresh(()=>{
        console.log('下拉刷新1111')
        page.value = 1
        getnewsList(1)
   })
   onLoad(() => {
        getnewsList(1)
   })
</script>

<style lang="scss">
.container{
    font-family: 'PingFang SC';
    // margin-top: 88px;
}
</style>